
<div class="chart-revenus-year">
    <h1><span><?= $arr["Nam"]; ?></span></h1>
    <span class="close-chart"></span>
    <?php
    if (count($arr["Data"]) == 0) {
        ?>
        <div class="no-record"><?= $LANG["label"]["NODATA"]; ?> !</div>
        <?php
    } else {
        $arrThang = array();
        $arrLuotChoiThang = array();
        $arrLuotChoiThua = array();
        $arrTienChoiThang = array();
        $arrTienChoiThua = array();
        foreach ($arr["Data"] as $data) {
            array_push($arrThang, "Th. " . $data["Thang"]);
            array_push($arrLuotChoiThang, $data["Solanthang"]);
            array_push($arrLuotChoiThua, $data["Solanthua"]);
            array_push($arrTienChoiThang, $data["Tongtienthang"]);
            array_push($arrTienChoiThua, $data["Tongtienthua"]);
        }
        ?>
        <div class="chart-line-area">
            <script>
                var gr = generateString('ABCDEFGHILKLMNOPQRSTUVWXYZ0123456789', 4);
            </script>
            <div class="chart luotchoi">
                <canvas id="chartLuotChoi" width="760" height="300"></canvas>
                <script>
                    var chartLuotChoiNew = 'chartLuotChoi_' + gr;
                    var chartLuotChoi = document.getElementById('chartLuotChoi');
                    chartLuotChoi.setAttribute('id', chartLuotChoiNew);
                </script>
                <div class="description">
                    <h4>
                        <i style="background: rgba(151,187,205,3)"></i>
                        <span><?= $LANG["label"]["NUMBEROFWONGAMES"]; ?></span>
                    </h4>
                    <h4>
                        <i style="background: rgba(220,220,220,3)"></i>
                        <span><?= $LANG["label"]["NUMBEROFLOSTGAMES"]; ?></span>
                    </h4>
                </div>
                <script>
                    var lineChartData = {
                        labels: <?php echo json_encode($arrThang); ?>,
                        datasets: [{
                                label: "Lươt choi thắng",
                                fillColor: "rgba(151,187,205,0.3)",
                                strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)",
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(151,187,205,1)",
                                data: <?php echo json_encode($arrLuotChoiThang); ?>
                            },
                            {
                                label: "Lươt choi thua",
                                fillColor: "rgba(220,220,220,0.3)",
                                strokeColor: "rgba(220,220,220,1)",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(220,220,220,1)",
                                data: <?php echo json_encode($arrLuotChoiThua); ?>
                            }
                        ]

                    };
                    var ctx = document.getElementById(chartLuotChoiNew).getContext("2d");
                    new Chart(ctx).Line(lineChartData, {
                        scaleFontFamily: 'Times New Roman',
                        scaleFontSize: 13,
                        scaleFontStyle: "normal",
                        scaleFontColor: "#FFF",
                        scaleGridLineColor: "rgba(255,255,255,.05)"
                    });
                </script>
            </div>
            <div class="caption">
                <?= $LANG["label"]["NUMBEROFBET"]; ?>
            </div>
        </div>
        <div class="chart-line-area">
            <div class="chart">
                <canvas id="chartTongTienChoi" width="760" height="350"></canvas>
                <script>
                    var chartTongTienChoiNew = 'chartTongTienChoi_' + gr;
                    var chartTongTienChoi = document.getElementById('chartTongTienChoi');
                    chartTongTienChoi.setAttribute('id', chartTongTienChoiNew);
                </script>
                <div class="description">
                    <h4>
                        <i style="background: rgba(151,187,205,3)"></i>
                        <span><?= $LANG["label"]["WINMONEY"]; ?></span>
                    </h4>
                    <h4>
                        <i style="background: rgba(220,220,220,3)"></i>
                        <span><?= $LANG["label"]["PAYMENTLOSS"]; ?></span>
                    </h4>
                    <h4 class="sum">
                        <?php
                        $tienSum = array_sum($arrTienChoiThua) - array_sum($arrTienChoiThang);
                        if ($tienSum < 0) {
                            ?>
                            <?= $LANG["label"]["LOSS"]; ?> <font color="#ff4400"><?= number_format(-$tienSum, "0", ",", "."); ?> VNĐ</font>
                            <?php
                        } else if ($tienSum > 0) {
                            ?>
                            <?= $LANG["label"]["PROFIT"]; ?> <font color="#36D05D"><?= number_format($tienSum, "0", ",", "."); ?> VNĐ</font>
                            <?php
                        } else if ($tienSum = 0) {
                            ?>
                            <?= $LANG["label"]["DRAW"]; ?>
                            <?php
                        }
                        ?>
                    </h4>
                </div>
                <script>
                    var chartData = {
                        labels: <?php echo json_encode($arrThang); ?>,
                        datasets: [{
                                label: "Tiền thu về",
                                fillColor: "rgba(151,187,205,0.3)",
                                strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)",
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(151,187,205,1)",
                                data: <?php echo json_encode($arrTienChoiThua); ?>
                            },
                            {
                                label: "Tiền thua khách",
                                fillColor: "rgba(220,220,220,0.3)",
                                strokeColor: "rgba(220,220,220,1)",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(220,220,220,1)",
                                data: <?php echo json_encode($arrTienChoiThang); ?>
                            }
                        ]

                    };
                    var ctx = document.getElementById(chartTongTienChoiNew).getContext("2d");
                    new Chart(ctx).Line(chartData, {
                        scaleFontFamily: 'Times New Roman',
                        scaleFontSize: 13,
                        scaleFontStyle: "normal",
                        scaleFontColor: "#FFF",
                        scaleGridLineColor: "rgba(255,255,255,.05)"
                    });
                </script>
            </div>
            <div class="caption">
                <?= $LANG["label"]["NUMBERMONEYPROFITFROMBETLOTTERY"]; ?> (VNĐ)
            </div>
        </div>
        <?php
    }
    ?>
</div>